<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        
        <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

        <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  	    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
        
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="/static/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/static/js/xadmin.js"></script>
    </head>
<body style="background-color: #FFF;">
    <div style="padding: 20px">
        <div class="demoTable">
            <form class="layui-form">
                <div class="layui-inline">
                    <input class="layui-input" name="nickname" id="nickname" autocomplete="off" placeholder="搜索昵称">
                </div>
    
                <div class="layui-inline">
                    <input class="layui-input" name="phone" id="phone" autocomplete="off" placeholder="搜索手机号">
                </div>

                <button class="layui-btn" type="button" id="seach">搜索</button>
            </form>
        </div>
    
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
 
    <script type="text/html" id="barDemo">
        <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="show">详情</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use('table', function(){
            var table = layui.table;

            function getList(){
                table.render({
                    elem: '#test'
                    ,url:'{:url("User/user_data")}'
                    ,toolbar: true // 开启头部工具栏
                    ,defaultToolbar: ['filter', 'exports', 'print']
                    ,title: '用户数据表'
                    ,where: {
                        key: {
                            nickname: $('#nickname').val()
                            ,phone: $('#phone').val()
                            ,admin_id: $('#admin_id').val()
                        }
                    }
                    ,cols: [[
                        {field:'id', title:'ID', fixed: 'left', width: 80, unresize: true, sort: true}
                        ,{field:'head_img', title:'头像', width: 80, templet: function(res){
                            return `<img src="${res.head_img}" height="100%">`;
                        }}
                        ,{field:'nickname', title:'用户名称', width: 150}
                        ,{field:'phone', title:'手机号', width: 150}
                        ,{field:'doctor_no', title:'情博士号', width: 150}
                        ,{field:'star', title:'星级', width: 100, sort: true}
                        ,{field:'money', title:'账户余额', width: 120, sort: true}
                        ,{field:'fans', title:'粉丝数', width: 100, sort: true}
                        ,{field:'is_audience', title:'听客', width: 100, sort: true, templet: function(res){
                            if(res.is_audience){
                                return '<span style="color:blue">是</span>';
                            }else{
                                return '<span style="color:red">否</span>';
                            }
                        }}
                        ,{field:'is_tutor', title:'婚恋导师', width: 120, sort: true, templet: function(res){
                            if(res.is_tutor){
                                return '<span style="color:blue">是</span>';
                            }else{
                                return '<span style="color:red">否</span>';
                            }
                        }}
                        ,{field:'is_consultant', title:'咨询师', width: 100, sort: true, templet: function(res){
                            if(res.is_consultant){
                                return '<span style="color:blue">是</span>';
                            }else{
                                return '<span style="color:red">否</span>';
                            }
                        }}
                        ,{field:'is_matchmaker', title:'红娘', width: 100, sort: true, templet: function(res){
                            if(res.is_matchmaker){
                                return '<span style="color:blue">是</span>';
                            }else{
                                return '<span style="color:red">否</span>';
                            }
                        }}
                        ,{field:'create_time', title:'加入时间', width: 200}
                        ,{fixed: 'right', title:'操作', width: 180, toolbar: '#barDemo'}
                    ]]
                    ,limit: 15
                    ,page: true
                });
            }

            getList()

            $("#seach").on('click',function(){
                getList()
            })
          
            // 监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;

                if(obj.event === 'del'){
                    layer.confirm('真的删除么', function(index){
                        $.post('{:url("User/user_del")}',{
                            id: obj.data.id
                        },function(res){
                            if(res.code == 400){
                                layer.msg(res.msg, {icon: 2});
                            }else{
                                obj.del();
                                layer.msg(res.msg, {icon: 1});
                            }
                        })

                        layer.close(index);
                    });
                }else if(obj.event == 'edit'){
                    window.location.href = "{:url('User/user_edit')}?id=" + obj.data.id + '&admin_id=' + obj.data.admin_id;
                }else if(obj.event == 'show'){
                    window.location.href = "{:url('User/user_show')}?id=" + obj.data.id + '&admin_id=' + obj.data.admin_id;
                }
            });

            // 启用||禁用操作
            form.on('switch(is_disable)', function(obj){
                let id = $(obj.elem).parents("tr").find("td[data-field='id'] div").text()
                $.post('{:url("User/set_is_disable")}',{id:id},function(res){
                    if(res.code == 400){
                        layer.msg(res.msg, {icon: 2, time: 1000}, function(){
                            getList();
                        });
                    }else{
                        layer.msg(res.msg, {icon: 1});
                    }
                })
            });
        });

        // 页面图片放大
        $('body').on('click','img',function(){
            var height = $(window).scrollTop();
            var src = $(this).attr('src');
            var type = $(this).attr('alt');

            if(type){
                layer.close(modal)
            }else{
                modal = layer.open({
                    type: 1,
                    title: false,
                    offset: height + 50 + 'px',
                    closeBtn: 0,
                    area: ['auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: '<img src="' + src + '" height=600px;" + " alt="true"/>'
                });
            }
        });
    </script>
</body>
</html>